<template>
  <div class="rollContainer">
    <div class="searchHead" ref="searchHead">
      <div class="tableBtnBox">
        <Button icon="md-add" size="default" @click="add">添加展会</Button>
      </div>
    </div>
    <Table :columns="columns1" border :height="tableHeight" :data="list" :loading="loading">
      <template slot-scope="{ row }" slot="time">
        <span>{{row.start_time | dateformat('YYYY-MM-DD HH:mm:ss')}}-{{row.end_time | dateformat('YYYY-MM-DD HH:mm:ss')}}</span>
      </template>
      <template slot-scope="{ row }" slot="action">
        <span class="tableBtn" @click="update(row)">
          <Icon size="18" type="ios-create-outline" />修改
        </span>
        <span class="tableBtn" @click="schedule(row.miceId,'/exhibition/schedule')">
          <Icon size="18" type="ios-create-outline" />编辑日程
        </span>
         <span class="tableBtn" @click="schedule(row.miceId,'/exhibition/units')">
          <Icon size="18" type="ios-create-outline" />组织单位
        </span>
        <span class="tableBtn" @click="inviteUser(row.miceId,'https://api.zhongshe.cc/e/')">
          <Icon size="18" type="md-person-add" />展商报名邀请
        </span>
        <span
          class="tableBtn"
          @click="inviteUser(row.miceId,'https://api.zhongshe.cc/a/')"
        >
          <Icon size="18" type="md-person-add" />观众报名邀请
        </span>
      </template>
    </Table>
    <div class="pageBox">
      <Page
        :total="total"
        :page-size="pageSize"
        :current="page"
        size="small"
        show-total
        show-sizer
        @on-change="changePage"
        @on-page-size-change="changeSize"
      />
    </div>
    <Modal v-model="isAdd" :title="miceId?'修改展会信息':'添加展会'" width="30%">
      <Form ref="formInline" :model="formInline" :rules="ruleInline" inline :label-width="150">
        <FormItem prop="miceName" label="展会名称">
          <Input type="text" v-model.trim="formInline.miceName" placeholder="请输入展会名称"></Input>
        </FormItem>
        <FormItem label="展会开始时间" prop="start_time">
          <DatePicker
            type="datetime"
            v-model="formInline.start_time"
            @on-change="changeDate($event, 'start_time')"
            placement="bottom-end"
            placeholder="请选择开始时间"
          ></DatePicker>
        </FormItem>
        <FormItem label="展会结束时间" prop="end_time">
          <DatePicker
            type="datetime"
            v-model="formInline.end_time"
            @on-change="changeDate($event, 'end_time')"
            placement="bottom-end"
            placeholder="请选择结束时间"
          ></DatePicker>
        </FormItem>
        <FormItem prop="about" label="展会介绍">
          <Input
            type="textarea"
            v-model.trim="formInline.about"
            :autosize="{minRows: 5,maxRows: 8}"
            placeholder="请输入展会介绍"
          ></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="cancel">取消</Button>
        <Button type="primary" @click="ok('formInline')">确定</Button>
      </div>
    </Modal>
    <Drawer title :closable="false" draggable width="500" v-model="open">
      <div class slot="title"></div>
      <div class="code">
        <div class="qrcode">
          <img :src="inviteObj.qrcode" alt />
          <div class="title">邀请二维码</div>
        </div>
      </div>

      <div class="url">
        <div class="title">路径： <span class="tableBtn btn" @click="copy" :data-clipboard-text="inviteObj.url">
          <Icon size="18" type="ios-copy-outline" />复制链接
        </span></div>
       
        <div>{{inviteObj.url}}</div>
      </div>
    </Drawer>
  </div>
</template>
<script>
import { miceList, modifyMice, addMice, invite } from "../../api/exhibitors";
export default {
  data() {
    const validateTime = (rule, value, callback) => {
      if (value) {
        callback();
      } else {
        return callback(new Error("请选择开始时间"));
      }
    };
    const validateTime1 = (rule, value, callback) => {
      if (value) {
        callback();
      } else {
        return callback(new Error("请选择结束时间"));
      }
    };
    return {
      open: false,
      inviteObj: {
        qrcode: "",
        url: ""
      },
      page: 1,
      pageSize: 20,
      total: 0,
      loading: false,
      columns1: [
        {
          title: "id",
          key: "miceId",
          align: "center",
          minWidth: 60
        },
        {
          title: "名称",
          key: "miceName",
          align: "center",
          minWidth: 150,
          tooltip: true
        },
        {
          title: "介绍",
          key: "about",
          align: "center",
          minWidth: 150,
          tooltip: true
        },
        {
          title: "时间",
          slot: "time",
          align: "center",
          minWidth: 250
        },
        {
          title: "操作",
          slot: "action",
          align: "center",
          minWidth: 350
        }
      ],
      formInline: {
        miceName: "",
        start_time: "",
        end_time: "",
        about: "",
        schedule:"",
        organize:"",
      },
      ruleInline: {
        miceName: [
          {
            required: true,
            message: "请输入分类名称",
            trigger: "blur"
          }
        ],
        start_time: [
          { required: true, validator: validateTime, trigger: "change" }
        ],
        end_time: [
          { required: true, validator: validateTime1, trigger: "change" }
        ],
        about: [
          {
            required: true,
            message: "请输入展会介绍",
            trigger: "blur"
          }
        ]
      },
      list: [],
      tableHeight: 100,
      isAdd: false,
      miceId: "" //展会id
    };
  },
  created() {
    this.getmiceList();
  },
  mounted() {
    this.$nextTick(() => {
      this.tableHeight =
        window.innerHeight - this.$refs.searchHead.offsetHeight - 220;
    });
  },
  methods: {
    copy() {
      var clipboard = new this.Clipboard(".btn"); //在main.js中引用
      clipboard.on("success", e => {
        // 释放内存
        clipboard.destroy();
        this.$Message.success("复制成功");
      });
      clipboard.on("error", e => {
        // 不支持复制
        this.$Message.warning("该浏览器不支持自动复制");
        // 释放内存
        clipboard.destroy();
      });
    },
    //邀请
    inviteUser(miceId, path) {
      invite({ path, miceId }).then(res => {
        if (res.status) {
          this.inviteObj = res.data;
          this.open = true;
        } else {
          this.$Message.error(res.msg);
        }
      });
    },
    changeDate(e, name) {
      this.formInline[name] = e;
    },
    getmiceList() {
      this.loading = true;
      const { page, pageSize } = this;
      miceList({ page: page - 1, pageSize, type: 0 }).then(res => {
        if (res.status) {
          this.total = res.data.count;
          this.list = res.data.list;
          this.loading = false;
        } else {
          this.$Message.error(res.msg);
          this.loading = false;
        }
      });
    },
    schedule(miceId,path) {
      this.$router.push({
        path,
        query: {
          miceId
        }
      });
    },
    update(row) {
      console.log(row);
      this.formInline = {
        miceName: row.miceName,
        start_time: this.$moment
          .unix(Number(row.start_time))
          .format("YYYY-MM-DD HH:mm:ss"),
        end_time: this.$moment
          .unix(Number(row.end_time))
          .format("YYYY-MM-DD HH:mm:ss"),
        about: row.about,
        schedule:row.schedule,
        organize:row.organize,
      };
      this.miceId = row.miceId;
      this.isAdd = true;
    },
    //添加展会
    add() {
      this.miceId = "";
      this.formInline = {
        miceName: "",
        start_time: "",
        end_time: "",
        about: "",
        schedule:"",
        organize:""
      };
      this.isAdd = true;
    },
    ok(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          const { miceName, about, start_time, end_time,schedule,organize } = this.formInline;
          let s_time = Math.round(
            new Date(start_time).getTime() / 1000
          ).toString();
          let e_time = Math.round(
            new Date(end_time).getTime() / 1000
          ).toString();
          if (this.miceId == "") {
            addMice({
              miceName,
              about,
              start_time: s_time,
              end_time: e_time,
              type: 0
            }).then(res => {
              if (res.status) {
                this.isAdd = false;
                this.$refs[name].resetFields();
                this.getmiceList();
                this.$Message.success(res.msg);
              } else {
                this.$Message.error(res.msg);
              }
            });
          } else {
            modifyMice({
              miceName,
              about,
              start_time: s_time,
              end_time: e_time,
              miceId: this.miceId,
              type: 0,schedule,organize
            }).then(res => {
              if (res.status) {
                this.isAdd = false;
                this.$refs[name].resetFields();
                this.getmiceList();
                this.$Message.success(res.msg);
              } else {
                this.$Message.error(res.msg);
              }
            });
          }
        } else {
        }
      });
    },
    cancel() {
      this.isAdd = false;
      this.$refs["formInline"].resetFields();
    },
    changePage(e) {
      this.page = e;
      this.getmiceList();
    },
    changeSize(e) {
      this.page = 1;
      this.pageSize = e;
      this.getmiceList();
    }
  }
};
</script>
<style lang="less" scoped>
.page {
  display: flex;
  justify-content: flex-end;
  padding: 20px 0;
}
.code {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  .qrcode {
    width: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #f2f2f2;
    padding: 20px 40px;
    img {
      width: 165px;
      height: 165px;
    }
    .title {
      padding: 14px 0 0;
    }
  }
}
</style>
